<template>
  <div class="msg">
    <ul v-if="messageInfoList.length<=0" class="null_content">
      <li><img src="../../assets/null.png" alt="" width="155"></li>
      <li>这里空空如也</li>
    </ul>
    <ul>
      <li class="msglist" v-for="item in messageInfoList" v-if="messageType==1">
        <div @click="goMessageDetail(item)">
          <leftSlider @msg-from-child="getMsgFromChild(item)">
            <div class="contents">
              <p class="title">{{item.title}} <span>{{item.sendDate}}</span></p>
              <p v-if="item.readStatus==0" class="detail">{{item.content}}<span></span></p>
              <p v-if="item.readStatus==1">{{item.content | textNumFilter}}<span></span></p>
            </div>
          </leftSlider>
        </div>
      </li>
      <li class="msglist" v-for="item in messageInfoList" v-if="messageType==2">
        <div @click="goMessageDetail(item)">
          <div class="contents">
            <p class="title">{{item.title}} <span>{{item.sendDate}}</span></p>
            <p >{{item.content | textNumFilter}}<span></span></p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  import {getSysMessageList, getMyMessageList, updateMessage} from '../../../test/unit/http'
  import {Toast} from 'we-vue'
  import leftSlider from '../offertemplate/delete'

  export default {
    name: 'msg',
    props: {},
    data() {
      return {
        messageInfoList: [],
        messageType: ''
      };
    },
    methods: {
      doUpdateMessage(params) {
        updateMessage(params).then(res => {
          if (res.code == 100) {
            this.getMessageListData();
          }
        })
      },
      goMessageDetail(messageInfo) {
        this.doUpdateMessage({messageId: messageInfo.messageId, readStatus: 1});
        this.$router.push({path: 'msgdetail', query: {messageInfoId: messageInfo.messageInfoId}})
      },
      getMsgFromChild(messageInfo) {
        this.doUpdateMessage({messageId: messageInfo.messageId, delStatus: 1});
      },
      getSysMessageListData() {
        getSysMessageList({}).then(res => {
          console.log(res);
          if (res.code == 100) {
            this.messageInfoList = res.object;
          }
        })
      },
      getMyMessageListData() {
        getMyMessageList({}).then(res => {
          console.log(res);
          if (res.code == 100) {
            this.messageInfoList = res.object;
          }
        })
      },
      getMessageListData() {
        var messageType = this.$route.query.messageType;
        this.messageType = messageType;
        if (messageType == 1) {
          this.getMyMessageListData();
        }
        if (messageType == 2) {
          this.getSysMessageListData();
        }
      }
    },
    created() {
      this.getMessageListData();

    },
    components: {
      leftSlider
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .null_content {
    padding-top: 50%;
    li:nth-child(2) {
      margin: 10px 0 20px;
      color: #bababa;
      font-size: 14px;
    }
  }

  .ul {
    padding-top: 50%;
    li:nth-child(2) {
      margin: 10px 0 20px;
      color: #bababa;
      font-size: 14px;
    }
  }

  .msglist {
    text-align: left;
    .contents {
      padding: 21px 10px;
      border-bottom: 1px solid #eee;
      .title {
        font-size: 16px;
        color: #111;
        span {
          float: right;
          font-size: 13px;
          color: #999;
        }
      }
      .detail {
        font-size: 13px;
        color: #999;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-top: 10px;
        span {
          float: right;
          display: block;
          width: 6px;
          height: 6px;
          background-color: #ff0000;
          border-radius: 50%;
        }
      }
    }

  }

  .msglist:last-child {
    .contents {
      border-bottom: none;
    }
  }
</style>
